<template>
	<view class="test">
		<view class="header">
			<view class="out">
				<u-icon name="arrow-left" size="25" @click="goout"></u-icon>
			</view>
			<view class="class-list">考场列表</view>
		</view>
		<!-- 考场详情 -->
		<view class="test-list" v-for="(item,index) in list" :key="index">
			<view class="box1" >
				<view class="a1">{{item.title}}</view>
				<view class="a2"></view>
			</view>
			<view class="box2">
				<span>题目总数:{{item.question_count}}</span>
				<span>总分数:{{item.total_score}}</span>
				<span>及格分:{{item.pass_score}}</span>
			</view>
			<view class="box3">
				<u-button type="success" class='btn' @click="gotest" >参加考试</u-button>
			</view>

		</view>
	</view>
</template>

<script>
	import {gettest} from '@/utils/api.js'
	export default{
		data(){
			return{
				list:[],
				
	          query:{
	          	page:1,
	          	limit:10
	          },
			}
		},
		onLoad(){
			this.getlist()
		},
		methods:{
			//获取考试数据
		 async getlist(){
				var res = await gettest(this.query)
				console.log('考试数据',res);
				this.list = res.data.rows
			},
			
			// 点击退出
			goout(){
			  uni.navigateBack({
			  	url:'/pages/index/index'
			  })
			},
			
			//点击参加考试
			gotest(){
				uni.navigateTo({
					url:'/pages/testdetail/testdetail'
				})
			}
		}
	}
</script>

<style lang="less">
	.test{
		.header{
			width: 100%;
			height: 100rpx;
				line-height: 100rpx;
			display: flex;
			flex-direction: row;
			.out{
				flex: 1;
				padding-left: 20rpx;
				padding-top: 27rpx;
			}
			.class-list{
				flex: 3;
				font-size: 38rpx;
				font-weight: 600;
				margin-left: 120rpx;
			}
		}
		.test-list{
			width: 100%;
			height: 380rpx;
			display: flex;
			flex-direction: column;
			.box1{
				flex: 1.5;
				display: flex;
				flex-direction: row;
				.a1{
					flex: 1;
					box-sizing: border-box;
					padding: 30rpx 55rpx;
				}
				.a2{
					flex: 1;
				}
			}
			.box2{
				flex: 2;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.box3{
				flex: 2;
				border-bottom: 20rpx solid #f5f5f3;
				border-top: 5rpx solid #f5f5f3;
				.btn{
						width: 180rpx;
						height: 90rpx;
						float: right;
						margin-right: 20rpx;
						background-color: #5ccc84;
						margin-top: 20rpx;
					}
			}
			.mot{
				background:white ;
			}
		}
	
	}
</style>